<template>
	<view id="medal-wall">
		<view class="head">
			<view class="avatar_box">
				<image :src="info.avatar" mode=""></image>
				<view class="name ellipseHide">{{info.nickName}}</view>
			</view>
			<view class="medal_num_box">
				<view class="medal_num_box_detail">
					<text class="num_box">{{info.medalNum}}</text>
					<text class="txt_box">枚勋章</text>
				</view>
				<view class="medal_num_box_buttom"></view>
			</view>
		</view>
		<view class="content" v-for="(item,cIndex) in info.medalList" :key="cIndex">
			<view class="content_head">
				<view style="width: 74rpx;"></view>
				<view class="content_head_title">
					<image src="@/static/wallet/medal_title_l.png" mode=""></image>
					<text>{{item.medalName}}</text>
					<image src="@/static/wallet/medal_title_r.png" mode=""></image>
				</view>
				<view class="content_head_r" @click="jumpDetail(cIndex)">
					<text>详情</text>
					<image src="@/static/wallet/medal_right_icon.png" mode=""></image>
				</view>
			</view>
			<view class="medal_bonus">
				<text>勋章加成：+{{item.stimulate}}%</text>
				<image src="@/static/wallet/wallet_warning_01.png" mode="" @click="openTip(item)"></image>
			</view>
			<block v-if="!item.finished&&item.medalLevelName!=''">
			<!-- <block> -->
				<view class="progress_box">
					<view class="progress_box_detail" style="width: 60%;" :style="{width: item.progress}"></view>
				</view>
				<view class="tips_box">
					还需获取{{item.nextContribution - item.contribution}}点贡献值晋升{{item.nextLevelName}}({{item.contribution}}/{{item.nextContribution}})
				</view>
			</block>
			<view class="medal_list">
				<view class="medal_list_box" v-for="(nav,index) in item.medalLevelList" :key="index">
					<view class="add_num" v-if="nav.stimulate!=''">+{{nav.stimulate}}%</view>
					<image :src="nav.medalLevelImg" mode=""></image>
					<view class="medal_name">{{nav.name}}</view>
					<view class="medal_tips">{{nav.rule}}</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<uni-popup ref="popup"  style="z-index:999;">
			<view class="popupBox">
				<view class="p_title">{{popupInfo.medalName}}</view>
				<view class="p_list">
					<view class="p_l_b">
						<text class="p_l_l">用途</text>
						<text>：</text>
						<text class="p_l_r">生产力加成（仅对{{popupInfo.industryName}}生效）</text>
					</view>
					<view class="p_l_b">
						<text class="p_l_l">获取途径</text>
						<text>：</text>
						<text class="p_l_r">消费打卡、任务、转赠</text>
					</view>
					<view class="p_l_b">
						<text class="p_l_l">加成逻辑</text>
						<text>：</text>
						<text class="p_l_r">用户默认{{popupInfo.industryName}}消费产出CoCo生产力为{{popupInfo.basicsProductivity}}%(消费100元可产出{{popupInfo.basicsProductivity}}CoCo)当前数字勋章加成后生产力为{{popupInfo.stimulate}}%（消费100元可产出{{popupInfo.stimulate}}CoCo）</text>
					</view>
					<view class="p_l_b">
						<text class="p_l_l p_l_end">{{popupInfo.medalName}}当前加成生产力</text>
						<text>：</text>
						<text class="p_l_r">{{popupInfo.medalStimulate}}%</text>
					</view>
					<view class="p_l_r" v-if="popupInfo.medalLevelName!=''">{{popupInfo.medalLevelName}}（{{popupInfo.medalStimulate}}%）</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {medalWallList} from '@/api/wallet.js'
	export default {
		data() {
			return {
				info:{},//勋章信息
				popupInfo:{},//弹窗信息
			}
		},
		onLoad() {
			this.getMedalWallList()
		},
		methods: {
			// 打开提示
			openTip(item){
				this.popupInfo = item
				this.$refs.popup.open()
			},
			// 跳转勋章详情
			jumpDetail(index){
				uni.navigateTo({
					url:'./medal-wall-detail?index=' + index
				})
			},
			// 获取勋章墙信息
			async getMedalWallList() {
				var res = await medalWallList()
				this.info = res.result
				this.info.medalList.forEach(item=>{
					item.progress = (item.contribution / item.nextContribution)* 100 + '%'
				})
			},
		}
	}
</script>

<style scoped>
	view{
		box-sizing: border-box;
	}
	#medal-wall{
		padding-bottom: 60rpx;
	}
	.head{
		background: url(/static/wallet/medal.png) no-repeat;
		background-size: 100% 100%;
		height: 432rpx;
	}
	.avatar_box{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 30rpx;
		color: #222222;
		width: 300rpx;
		padding-top: 56rpx;
	}
	.avatar_box image{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		border: 6rpx solid #E7C9A9;
		margin-bottom: 16rpx;
	}
	.name{
		width: 90%;
		text-align: center;
	}
	.medal_num_box{
		min-width: 182rpx;
		height: 80rpx;
		position: relative;
		margin-left: 60rpx;
	}
	.medal_num_box_buttom{
		position: absolute;
		min-width: 182rpx;
		height: 28rpx;
		background-color: #F2D2AB;
		border-radius: 100rpx;
		bottom: 0;
	}
	.medal_num_box_detail{
		min-width: 182rpx;
		text-align: center;
		position: absolute;
		top: 20rpx;
		z-index: 1;
	}
	.num_box{
		color: #222222;
		font-size: 48rpx;
		font-weight: bold;
	}
	.txt_box{
		color: #222222;
		font-size: 30rpx;
		margin-left: 8rpx;
	}
	.content{
		padding-top: 40rpx;
		border-bottom: 20rpx solid #F2F5F8;
		padding-bottom: 40rpx;
	}
	.content:last-child{
		border-bottom: 0;
	}
	.content_head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx 40rpx;
	}
	.content_head_title{
		font-size: 34rpx;
		color: #000000;
		font-weight: bold;
	}
	.content_head_title text{
		margin: 0 20rpx;
	}
	.content_head_title image{
		width: 42rpx;
		height: 16rpx;
	}
	.content_head_r{
		font-size: 28rpx;
		color: #444444;
	}
	.content_head_r image{
		width: 12rpx;
		height: 20rpx;
		margin-left: 6rpx;
	}
	.medal_bonus{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #FF3A3A;
		padding: 0rpx 60rpx 0;
	}
	.medal_bonus image{
		width: 34rpx;
		height: 34rpx;
		margin-left: 8rpx;
	}
	.progress_box{
		background-color: #EDEDED;
		border-radius: 100rpx;
		height: 24rpx;
		margin: 16rpx 60rpx 12rpx;
	}
	.progress_box_detail{
		height: 100%;
		border-radius: 100rpx;
		background: linear-gradient(90deg, #3970FF 0%, #FF3CE7 56.59%, #FFCA62 98.24%);
	}
	.tips_box{
		font-size: 24rpx;
		color: #8A8EA1;
		margin: 0 60rpx;
	}
	.medal_list{
		display: flex;
		flex-wrap: wrap;
	}
	.medal_list_box{
		width: calc(100% / 3);
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		margin-top: 40rpx;
	}
	.add_num{
		border: 2rpx solid #FF3A3A;
		font-size: 22rpx;
		color: #FF3A3A;
		height: 32rpx;
		line-height: 28rpx;
		padding: 0 8rpx;
		border-radius: 100rpx;
		position: absolute;
		top: 10rpx;
		right: 0;
		z-index: 1;
		background-color: #FFFFFF;
	}
	.medal_list_box image{
		width: 150rpx;
		height: 150rpx;
		margin-bottom: 22rpx;
	}
	.medal_name{
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
		margin-bottom: 6rpx;
	}
	.medal_tips{
		font-size: 24rpx;
		color: #8A8EA1;
	}
	/* 弹窗 */
		.popupBox{
			width: 650rpx;
		    background: #fff url('@/static/newsImg/my_number_bg.jpg') no-repeat;
		    background-size: 100% auto;
			border-radius: 20rpx;
			padding-bottom: 72rpx;
		}
		.p_title{
			font-size: 40rpx;
			color: #222222;
			width: 100%;
			padding-top: 50rpx;
			padding-bottom: 56rpx;
			text-align: center;
			font-weight: 600;
		}
		.p_list{
			width: 100%;
			padding-left: 40rpx;
			box-sizing: border-box;
			padding-right: 10rpx;
			margin-bottom: 14rpx;
			line-height: 52rpx;
		}
		.p_l_b{
	/* 		display: flex;
			flex-flow: wrap; */
			color: #222222;
			font-size: 30rpx;
			flex-shrink: 0;
		}
		.p_l_l{
			display:inline-block;
			font-size: 30rpx;
			font-weight: bold;
			width: 4em;
	        text-align-last: justify;
		}
		.p_l_r{
			/* display:inline-block; */
		}
		.p_l_end{width: auto;}
		/* end */
</style>
